<template>
    <div>
        <van-sticky>
          <search-two id="head"></search-two>
        </van-sticky>
        <van-tree-select
        v-model:main-active-index="activeIndex"
        height="100%"
        :items="items"
        >
            <template #content>
                <swiper v-if="activeIndex === 0" id="swi"></swiper>
                <type-1 v-if="activeIndex === 0"></type-1>
                <type-2 v-if="activeIndex === 0"></type-2>
                <type-31 v-if="activeIndex === 0" title="小说" name="畅销榜"></type-31>
                <type-32 v-if="activeIndex === 0" title="文学" name="畅销榜"></type-32>
                <type-33 v-if="activeIndex === 0" title="青春文学" name="畅销榜"></type-33>
            </template>
        </van-tree-select>
    </div>
</template>

<script>
import { ref } from 'vue';
import SearchTwo from '../components/TypeSearch.vue';
import swiper from '../components/TypeSwipe.vue';
import type1 from '../components/Type11.vue';
import type2 from '../components/Type21.vue';
import type31 from '../components/Type31.vue';
import type32 from '../components/Type32.vue';
import type33 from '../components/Type33.vue';
export default {
  components: {
    SearchTwo,
    swiper,
    type1,
    type2,
    type31,
    type32,
    type33,
  },
  setup() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [{ text: '图书' }, { text: '童书' }, { text: '电子书' }, { text: '手机数码' }, { text: '创意文具' }
      , { text: '电脑办公' }, { text: '食品' }, { text: '女装' }, { text: '童装童鞋' }, { text: '男装' }, { text: '母婴玩具' }
      , { text: '男女鞋' }, { text: '运动户外' }, { text: '厨房用品' }, { text: '个护清洁' }, { text: '家用电器' }],
    };
  },
};

</script>

<style lang="scss" scoped>
  #head{
    background: #fff;
  }
  #swi{
    margin-top: 3vw;
    padding-left: 2vw;
    width: 94%;
  }


  ::v-deep .van-tree-select__nav{
    flex: none;
    
  }
  ::v-deep .van-tree-select{
    --van-tree-select-nav-background-color: 	var(--van-background-color-light);
    --van-tree-select-content-background-color: var(--van-background-color);
    
  }
  ::v-deep .van-sidebar-item{
    background: #fff;
    text-align: center;
    
  }
  ::v-deep .van-sidebar-item--select{
    background: var(--van-tree-select-content-background-color);
  }
  ::v-deep .van-tree-select__nav-item{
    padding: 21px 12px;
  }
</style>